<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">优惠券</span>
        <span class="public-header-right"></span>
    </div>

    <!--正文-->
    <div class="coupon bc-gray">
        <div class="hd flex">
            <a href="javascript:;" class="active">可使用</a>
            <a href="javascript:;">已使用</a>
            <a href="javascript:;">已过期</a>


        </div>
        <div class="bd">
            <div class="bd-1 bd-0 active">
                <ul>
                    <li v-for="item in use">
                        <div class="img"></div>
                        <span>{{item.coupon_name}}</span>
                        <p class="nn">
                            <span class="small">满{{item.use_condition}}元可优惠</span><em>￥</em><span class="big">{{item.coupon_money}}</span>
                        </p>
                        <p class="bt">
                            有效期:{{item.valid_data}}前
                        </p>
                    </li>
                    <!-- <li>
                        <div class="img"></div>
                        <span>12345678</span>
                        <p class="nn">
                            <span class="small">可优惠</span><em>￥</em><span class="big">12</span>
                        </p>
                        <p class="bt">
                            有效期:07.08至07.18
                        </p>
                    </li> -->
                    <!-- <li class="active">
                        <div class="img"></div>
                        <span>12345678</span>
                        <p class="nn">
                            <span class="small">可优惠</span><em>￥</em><span class="big">12</span>
                        </p>
                        <p class="bt">
                            有效期:07.08至07.18
                        </p>
                    </li> -->
                </ul>
            </div>
            <div class="bd-2 bd-0">
                <ul>
                  <li v-for="item in used">
                        <div class="img"></div>
                        <span>{{item.coupon_name}}</span>
                        <p class="nn">
                            <span class="small">满{{item.use_condition}}元可优惠</span><em>￥</em><span class="big">{{item.coupon_money}}</span>
                        </p>
                        <!-- <p class="bt">
                            有效期:07.08至07.18
                        </p> -->
                    </li>
                </ul>
            </div>
            <div class="bd-3 bd-0">
                <ul>
                     <li v-for="item in expired">
                        <div class="img"></div>
                        <span>{{item.coupon_name}}</span>
                        <p class="nn">
                            <span class="small">满{{item.use_condition}}元可优惠</span><em>￥</em><span class="big">{{item.coupon_money}}</span>
                        </p>
                        <!-- <p class="bt">
                            有效期:07.08至07.18
                        </p> -->
                    </li>
                </ul>
            </div>

        </div>




    </div>

    <script src='../js/vue.js'></script>
    <script src='../js/vue-resource.min.js'></script>

    <script>
        $(function () {
            new Vue({
                el: 'body',
                data: {

                },
                ready: function () {
                    this.$http.get(base_url + "ZITAOHUI/user/coupon", {
                        params: {
                            uid: 1
                        }
                    }).then(
                        function (data) {
                            console.log(data)
                            let all_data = data.data.extend.data;
                                let use = all_data.use;
                            let used = all_data.used;
                            let expired = all_data.expired;
                            for (let i = 0; i < use.length; i++) {
                                let time = new Date(use[i].valid_data);
                                use[i].valid_data = time.getMonth() + '.' + time.getDate()

                            }
                        
                            this.$set('use', use)
                            this.$set('used', used)
                            this.$set('expired', expired)
                        }
                    )
                },
                methods: {

                }

            })
        })
    </script>

    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>
</body>

</html>